<template>
<div id="background">
    <el-container>
        <el-header id="shiCaoBaoMingHead">
             <el-row type="flex" style="height:80%;display:flex;align-items: flex-end">
                    <el-col :xs="2" :sm="2" :md="2" :offset="1" class="imgCol">
                    <img v-bind:src="backIcon" class="backSize" @click="back"/>
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" :offset="6" class="imgCol"> 
                    <span class="titleSize">培训报名</span>
                    </el-col>
            </el-row>
        </el-header>
        <el-main>
            <div>
                <el-input  class="shiCaoBaoMingInput" readonly :value="peiXun.trainClassName">  
                     <span slot="prepend">培训名称</span>
                </el-input>
                 <el-input  class="shiCaoBaoMingInput" readonly :value="peiXun.trainOrganName">  
                     <span slot="prepend">培训机构</span>
                </el-input>
                <!-- <el-input  class="shiCaoBaoMingInput" readonly :value="peiXun.trainClassRequest">  
                     <span slot="prepend">报名要求</span>
                </el-input> -->
                <div v-for="(request,index) in peiXun.trainClassRequest" :key="request">
                    <el-input  class="shiCaoBaoMingInput" readonly :value="request">  
                        <span slot="prepend">报名要求{{index+1}}</span>
                    </el-input>
                </div>
                <el-input  class="shiCaoBaoMingInput" readonly :value="peiXun.trainClassLocation">  
                     <span slot="prepend">报名地点</span>
                </el-input>
                <el-input  class="shiCaoBaoMingInput" readonly :value="peiXun.trainClassTime">  
                     <span slot="prepend">报名时间</span>
                </el-input>
            </div>
            <div class="shiCaoBaoMingLine"></div>
            <div>
                <el-input  class="shiCaoBaoMingInput"   :value="info.realname" readonly>  
                     <span slot="prepend">姓名</span>
                </el-input>
                <el-input  class="shiCaoBaoMingInput"  :value="info.id" readonly>  
                     <span slot="prepend">身份证号码</span>
                </el-input>
                 <el-input  class="shiCaoBaoMingInput" :value="info.contact" readonly>  
                     <span slot="prepend">联系方式</span>
                </el-input>
            </div>
        </el-main>
        <el-footer>
            <el-row type="flex" style="position:fixed;bottom:10px;width:100%">
                <!-- <el-col  :xs="6" :sm="6" :md="6">
                     <button class="btnMoney">¥{{price}}</button>
                </el-col>
                <el-col  :xs="14" :sm="10" :md="10">
                    <button class="btnBaoMing2" @click="payPeiXun">立即报名</button> 
                </el-col> -->
                <el-col  class="imgCol" >
                    <button class="btnBaoMing2" @click="payPeiXun">
                        <span style="margin-right:5px">¥{{price}}</span>
                        <span style="margin-right:5px">|</span>
                        <span>立即报名</span>
                    </button> 
                </el-col>
            </el-row>
        </el-footer>
    </el-container>
</div>    
</template>
<script>
import backIcon from '../../assets/img/mine/geRenZhongXin/back.png'
import { Toast } from 'vant'
export default {
    data(){
        return{
            //绑定培训课次id
            trainClassTimeId:'',
            backIcon:backIcon,
            //绑定该次报名的价格
            price:'',
            peiXun:{},
            info:{
                realname:'',
                contact:'',
                id:''
            },
            //绑定支付通道
            pays:{"":""},
            //绑定订单号
            order:'',
        }
    },
    mounted(){
        var trainClassTimeId=this.$route.query.trainClassTimeId;
        this.trainClassTimeId=trainClassTimeId;
        this.price=this.$route.query.price;
        this.getBaoMingInfo(trainClassTimeId);
        this.getPersonInfo();

         var normalHeight=sessionStorage.getItem('normalHeight');

          var bg = document.getElementById("background");
       // normalHeight=document.documentElement.clientHeight;
        console.log("height:"+normalHeight);
        bg.style.height = normalHeight+"px";
        bg.style.backgroundColor = "#ffffff"
        bg.style.margin = "0px";

        var normalHeight=document.documentElement.clientHeight;
        var head=document.getElementById("shiCaoBaoMingHead");
        var headHeight=normalHeight/30 *4 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";

        //准备好支付通道
        this.plusReady();
    },
    methods:{
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
        //获取培训报名各种信息
        getBaoMingInfo(id){
            var URL=this.IP.IP+'/train/trainClassApplyInformation';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params:{
                    trainClassTimeId:id
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.peiXun=response.data.data;
                    
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //获取默认的个人报名信息
        getPersonInfo(){
            var URL=this.IP.IP+'/user/enrollInfo';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.info=response.data.data
                    
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //准备支付通道
        plusReady() {
            var that = this;
            console.log("输出pays:");
            console.log(that.pays);
            // var pays={};
            // 获取支付通道
            plus.payment.getChannels(function (channels) {
            for (var i in channels) {
                var channel = channels[i];
                if (channel.id == 'qhpay' || channel.id == 'qihoo') { // 过滤掉不支持的支付通道：暂不支持360相关支付
                    continue;
                }
                console.log(channel.id);
                console.log(channel);
                that.pays[channel.id] = channel;
            }
            }, function (e) {
                console.log('获取支付通道失败：'+e.message);
            });
        },
        //实操培训报名
        payPeiXun(){
            var w=null;
            var that=this;
            var url="https://openapi.alipay.com/gateway.do"
            // 支付
            var appid=plus.runtime.appid;
	        if(navigator.userAgent.indexOf('StreamApp')>=0){
		          appid='Stream';
            }
            console.log("appid:"+appid);
            w=plus.nativeUI.showWaiting();
    
            var xhr=new XMLHttpRequest();

            this.getRes(w);

            xhr.onreadystatechange=function(){
                console.log(xhr.readyState);
                console.log(xhr.status);
                switch(xhr.readyState){
                  case 4:
                      w.close();
                      w=null;
                      if(xhr.status==200){
                        console.log('----- 请求订单成功 -----');
                        //console.log(xhr.responseText);
                        // var order=xhr.responseText;
                        console.log(that.order);
                        plus.payment.request(that.pays['alipay'],that.order,function(result){
                          console.log('----- 支付成功 -----');
                          console.log(JSON.stringify(result));
                            plus.nativeUI.alert('支付成功！',function(){
						            back();
					            },'支付成功');
                          },function(e){
                            console.log('----- 支付失败 -----');
                            console.log('['+e.code+']：'+e.message);
                            plus.nativeUI.alert('支付失败', null, '支付失败：'+e.code);
                        });
                      }else{
                        console.log('----- 请求订单失败 -----');
                        console.log( xhr.status );
                        plus.nativeUI.alert('获取订单信息失败！', null);
                      }
                    break;
                  default:
                    break;
              }
            }
            xhr.open('GET',url);
	        console.log('请求支付订单：'+url);
	        xhr.send();
        },
        //得到订单号
        getRes(w){
             var URL=this.IP.IP+'/pay/params';
            console.log(URL);
            console.log(this.trainClassTimeId);

            this.axios({
               method:'get',
               url:URL,
               params:{
                 goodId:this.trainClassTimeId,
                 goodType:'TRAINCLASSTIME'
               }
           }).then(response=>{
               var code=0;
               code=response.data.code;
               if(code==0){
                    this.order=response.data.data;
                    console.log("order:");
                    console.log(this.order);
               }else{
                  w.close();
                   Toast(response.data.msg);
               }   
           }).catch(error=>{
               console.log(error);
           })
        },
    }
}
</script>
<style>
.btnMoney{
     background-color: #53cdf5;
    height: 40px;
    width: 100%;
    color: #fff;
    font-size: 1.125em;
    outline: none;
    /* -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px; */
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    border-style: none;
    
}
.btnBaoMing2{
    background-color: #53cdf5;
    height: 40px;
    width: 80%;
    color: #fff;
    font-size: 1.125em;
    outline: none;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
    border-style: none;
   
}
.shiCaoBaoMingLine{
    background-color: #f5f4f9;
    height: 8px;
    width: 100%;
}
.shiCaoBaoMingInput .el-input__inner {
    border-style: none;
    border-bottom: 1px solid #f5f4f9;
    border-radius: 0px;
}
.shiCaoBaoMingInput .el-input.is-active .el-input__inner, .el-input__inner:focus {
    border-color: #f5f4f9;
 
}
.shiCaoBaoMingInput .el-input-group__append, .el-input-group__prepend {
   border-style: none;
   background-color:#fff;
   border-bottom: 1px solid #f5f4f9;
}
#shiCaoBaoMingHead{
    background-color: #53cdf5;
    color: #707070;
}
.imgCol{
    display:flex;
    align-items:center;
    justify-content:center
}
.el-main{
    padding: 0px;
  
}
.el-header{
    padding: 0px;
}
.el-footer{
    padding: 0px;
}
.backSize{
    height: 26px;
}
.titleSize{
    font-size:1.125em;
    color:#ffffff
}
@media screen and (max-width: 340px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      font-size: 1em;
  }
}
</style>
